<template>

  <div>

    <el-form ref="configForm"  :model="configForm" label-width="110px" :rules="rules" style="padding: 20px;">

          <el-form-item label="外网域名或IP" prop="ip">
            <el-input v-model="configForm.ip" placeholder="外网域名或IP" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="外网端口" prop="ip">
            <el-input v-model="configForm.port" placeholder="外网端口" autocomplete="off" disabled=""></el-input>
          </el-form-item>

          <el-form-item label="渲染接入端口" prop="dispatchPort">
            <el-input v-model="configForm.dispatchPort" placeholder="渲染接入端口" autocomplete="off" disabled></el-input>
          </el-form-item>

          <el-form-item label="渲染接入密钥" prop="dispatchSecretKey">
            <el-input v-model="configForm.dispatchSecretKey" placeholder="渲染接入密钥" autocomplete="off" disabled=""></el-input>
          </el-form-item>
          <el-form-item label="预览地址" prop="previewUrl">
            <el-input v-model="configForm.previewUrl" placeholder="预览地址" autocomplete="off" ></el-input>
          </el-form-item>
          <el-form-item label="调试地址" prop="debugUrl">
            <el-input v-model="configForm.debugUrl" placeholder="调试地址" autocomplete="off" ></el-input>
          </el-form-item>

<!--          <el-form-item label="启用加密通讯">
            <el-switch
              v-model="configForm.enabled"
              active-value="1"
              inactive-value="0"
              >
            </el-switch>
          </el-form-item> -->


        </el-form>
    <div style="text-align: right;" slot="footer" class="dialog-footer">
      <el-button @click="closed" :loading="loading">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="submitForm">确 定</el-button>
    </div>


  </div>

</template>

<script>
  import {
    saveSettingsConfig,
    getSettingsConfig
  } from '@/api/biz/settings'
  import {
    isOk
  } from '@/utils/request'
  export default {
    name: 'RelayDialog',
    components: {
    },
    props: {
      properties: {
        type: Object,
        default: () => ({})
      }
    },
    computed:{

    },
    watch:{
      properties: {
        handler: function(value) {
        },
        immediate: true,
        deep: false
      }
    },
    created() {
      this.getSettingsConfig();
    },
    data(){
      return {
        visible:false,
        title:'中继服务',
        loading:false,
        configForm:{
          id:'',
          ip:"",
          port:"8880",
          dispatchPort:"6666",
          dispatchSecretKey:"",
          debugUrl:"",
          previewUrl:"",
        },
        rules: {
          ip: [{
            required: true,
            message: '请输入外网域名或IP',
            trigger: 'blur'
          }],
          port: [{
            required: true,
            message: '请输入外网端口',
            trigger: 'blur'
          }],
          dispatchPort: [{
            required: true,
            message: '请输入渲染接入端口',
            trigger: 'blur'
          }],
          previewUrl: [{
            required: true,
            message: '请输入预览地址',
            trigger: 'blur'
          }],
          debugUrl: [{
            required: true,
            message: '请输入调试地址',
            trigger: 'blur'
          }]
        },
      }
    },
    methods:{
      getSettingsConfig(){
        this.loading=true
        getSettingsConfig().then(rsp => {
          if(isOk(rsp)){
            const _data = rsp.result
            if(_data){
              this.configForm.id=_data.id||'';
              this.configForm.ip=_data.ip||'127.0.0.1';
              this.configForm.port=_data.port||'8880';
              this.configForm.dispatchPort=_data.dispatchPort||'6666';
              this.configForm.dispatchSecretKey=_data.dispatchSecretKey||'';
              this.configForm.debugUrl=_data.debugUrl||'';
              this.configForm.previewUrl=_data.previewUrl||'';
            }
          }
        }).catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
      },
      submitForm: function() {
        this.$refs.configForm.validate((valid) => {
          if (valid) {
            this.loading = true
            saveSettingsConfig(this.configForm).then(rsp => {
              this.$message({
                type: 'success',
                message:rsp.message
              })
              this.closed()
            }).catch(err => {
              console.log(err);
            })
            .finally(() => {
              this.loading = false
            })
          }
        })
      },
      closed: function() {
        this.$emit('closed', false)
      },
    }
  }

</script>

<style>
</style>
